Ul li 横並び折り返し

CSS で ul li を横並びにする & リスト要素の水平配置テクニック解説

Webページの制作において、リスト要素 (ul li) を横並びに配置したいケースは多くあります。例えば、ナビゲーションメニュー、画像ギャラリー、タグクラウドなどが挙げられます。本記事では、CSS を用いて ul li を横並びにする方法について、具体的なコード例を交えながら詳しく解説します。

ul li を横並びにする必要性

ul li を横並びにすることで、以下の様なメリットがあります。

スペースを有効活用できる
視認性が向上し、ユーザーが情報を見つけやすくなる
デザインの自由度が高まる

方法1: display: inline-block; を使用する

`display: inline-block;` を使用すると、要素をインライン要素のように水平方向に配置しながら、ブロック要素のように幅や高さを指定することができます。


<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<style>
ul {
  font-size: 0; /* 空白間隙対策 */
}
li {
  display: inline-block; 
  font-size: 16px; /* 必要に応じてフォントサイズを指定 */
  margin-right: 10px; /* 項目間の余白 */
}
</style>

メリット

理解しやすく、実装が簡単

デメリット

要素間に空白が生じる場合がある (対策が必要)
IE6/7 でのレイアウト崩れ (対策が必要)

空白間隙の対策

親要素 (ul) の `font-size` を `0` に設定する。
子要素 (li) の `font-size` を任意のサイズに設定する。

IE6/7 でのレイアウト崩れの対策

`display: inline-block;`に加えて、`*display: inline; *zoom: 1;` を指定する。(IE8 以上では無視される)

方法2: Flexbox を使用する

Flexbox は、柔軟性の高いレイアウトを実現するための CSS のモジュールです。要素の順序や配置を自由に制御することができます。


<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<style>
ul {
  display: flex;
}
li {
  margin-right: 10px; /* 項目間の余白 */
}
</style>

メリット

柔軟性が高く、様々なレイアウトに対応可能
要素の順序制御が容易

デメリット

IE10 以前のブラウザではサポートされていない

方法3: float: left; を使用する

`float: left;` を使用すると、要素を左側にフロートさせて、後続の要素をその周りに回り込ませることができます。


<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<style>
li {
  float: left;
  margin-right: 10px; /* 項目間の余白 */
}
ul::after {
  content: "";
  display: block;
  clear: both; /* フロートの解除 */
}
</style>

メリット

実装が比較的簡単

デメリット

フロートの解除が必要 (レイアウト崩れの原因となる可能性がある)

方法の比較

各方法のメリット・デメリットをまとめると以下の通りです。

方法	メリット	デメリット	対応ブラウザ
`display: inline-block;`	シンプルで実装が簡単	空白間隙、IE6/7 の互換性問題	IE8 以上 (対策が必要)
Flexbox	柔軟性が高く、様々なレイアウトに対応可能	IE10 以前のブラウザではサポートされていない	IE10 以上
`float: left;`	実装が比較的簡単	フロートの解除が必要	IE6 以上

まとめ

本記事では、CSS を用いて ul li を横並びにする方法について、3 つの方法を紹介しました。それぞれの方法にはメリット・デメリットがありますので、状況に応じて使い分けるようにしましょう。

参考文献

よくある質問

Q1. `display: inline-block;` を使用した場合、要素間に空白が生じるのはなぜですか？

A1. インラインブロック要素は、HTML ソースコード上の改行やスペースもレンダリングされるため、空白が生じます。対策としては、親要素の `font-size` を `0` に設定する方法や、子要素の間にコメントアウトを入れる方法があります。

Q2. Flexbox は、古いブラウザでは使用できないのでしょうか？

A2. Flexbox は、IE10 以上のブラウザでサポートされています。古いブラウザに対応する必要がある場合は、別の方法を検討する必要があります。caniuse.com などのウェブサイトで、各 CSS プロパティのブラウザ対応状況を確認することができます。

Q3. `float: left;` を使用した場合、フロートの解除をしないとどうなるのでしょうか？

A3. フロートを解除しないと、後続の要素がフロートした要素の周りに回り込んでしまい、レイアウトが崩れる可能性があります。フロートの解除には、`clear: both;` を使用する方法や、clearfix というテクニックを使用する方法があります。

その他の参考記事:ul li 横並び 2 列